<template>
    <div class="app-nav" style="height:6.18rem">
        <div class="header-nav">
					<div class="header-nav-head">
						
						<router-link to="/login" class="headerimg" tag="a"><img src="http://361cdn.361sport.com/tel/images/head.jpg" class="head"></router-link>
						<p style="font-size:15px;color:#fff;margin-top:15px"><router-link to="/register" tag="a" style="color:#fff;">加入</router-link> / <router-link to="/login" tag="a" style="color:#fff;">登录 361°</router-link></p> 
				</div>

				<div class="search">
						<input type="text" name="keyword" placeholder="输入关键词">
						<a href="javascript:void(0);" class="searchbtn fr" style="width:15px;height:9px;padding-right:15px;padding-top:10px;color: #2b2b2b;">
							<img src="http://361cdn.361sport.com/tel/images/search.png" style="width:100%">
						</a>
				</div>

					<ul class="header-nav-con">
					<li>
						<router-link to="/home" tag="a" class="activity-tit" >官网首页</router-link>
					</li>
					<li>
						<span class="title" @click="show1=!show1">商城</span>
						<ul class="navcontent" v-if="show1">
							<li>
								<router-link to="/home" tag="a"  style="text-indent: 1em; border:none; color:#fff; padding:14px 0px;display: block;font-size: 15px;">商城首页</router-link>
								<router-link to="/goods" tag="a" class="title2">男鞋</router-link>
								<router-link to="/goods" tag="a" class="title2">女鞋</router-link>
								<router-link to="/goods" tag="a" class="title2">男装</router-link>
								<router-link to="/goods" tag="a" class="title2">女装</router-link>
							</li>
						</ul>
					</li>					
					<li>
						<span class="title" @click="show2=!show2">新闻</span>
						<ul class="navcontent" v-if="show2">
							<li>
								<a style="text-indent: 1em; border:none; color:#fff;font-size:15px;height:20px;line-height:20px;padding:14px 0px;padding-left:20px" href="">
									品牌新闻
								</a>
							</li>		
						</ul>
					</li>
					<li>
						<a href="" class="activity-tit">团购定制</a>
					</li>
				</ul>
			</div>
    </div>
</template>

<script>

export default {
	data(){
		return{
			show1:false,
			show2:false
		}
	}
	
}
</script>
<style lang="stylus" scoped>
  .app-nav
    background #000
    width 75%
		.header-nav-head
      padding-top .3rem
      text-align center
		.headerimg
			height auto
			border-radius .5rem
			border-style double
			border-color transparent
			background #fff
			display inline-block
		.head 
			width .85rem
			height .85rem
			border-radius .5rem
		.header-nav-con
			width 80%
			margin .35rem auto	
			margin-top .2rem
		.activity-tit,.title
			display block
			font-size .15rem
			border-bottom .01rem solid #1a1a1a
			padding .14rem 0
			color #fff
		.title2
			display block
			font-size 15px
			border-bottom 1px solid #1a1a1a
			padding 14px 0
			color #fff
			border none
			text-indent 1em
		.search
			width 2rem
			height .35rem
			border .01rem solid #fff
			border-radius 1rem
			margin 0 auto
			margin-top .2rem
		input 
			background-color transparent
			height .32rem
			width 1.25rem
			padding-left .18rem
			font-size .15rem
			color #808080
			font-family "Microsoft YaHei", "Arial"
			border none
			outline none	
		
</style>
